<template>
<div class="box changBox">
<van-nav-bar
  title="个人资料"
  right-text="保存"
  left-arrow
  @click-left="onClickLeft"
/>
<div class="my-img">
    <van-uploader :max-size="500 * 500" :max-count="1" :after-read="readOk" >
        <van-image
          width="100"
          height="100"
          :src="avatar"
        />
        <p>点击修改头像</p>
    </van-uploader>
</div>
<van-form>
  <van-field
    v-model="nickName"
    label="昵称"
    name="username"
    placeholder="请填写您的昵称"
  />
  <!-- <van-field
    v-model="tel"
    type="tel"
    label="手机"
    name="tel"
  /> -->
   <van-field
    v-model="email"
    label="邮箱"
    name="email"
    placeholder="请输入邮箱地址"
  />
  <van-field name="radio" label="性别">
  <template #input>
    <van-radio-group v-model="radio" direction="horizontal">
      <van-radio name="1">男</van-radio>
      <van-radio name="2">女</van-radio>
    </van-radio-group>
  </template>
</van-field>
<van-cell is-link @click="showPopup" >
  <van-field
    v-model="birthday"
    readonly
    clickable
    label="生日"
    name="birthday"
    placeholder="请输入生日"
    :value="value"
    @click="showPicker = true"
  />
</van-cell>
<van-popup v-model="showPicker" position="bottom">
 <van-datetime-picker
  v-model="currentDate"
  type="date"
  title="出生日期"
  :min-date="minDate"
  :max-date="maxDate"
  @confirm="onConfirm"
  @cancel="showPicker = false"/>
</van-popup>
</van-form>
</div>
</template>
<script>
import Vue from 'vue'
import { NavBar, Field, Form, Calendar, RadioGroup, Radio, Button, Toast, DatetimePicker, Cascader, Popup, Uploader, Image as VanImage } from 'vant'
import { getUser } from '@/api/request.js'
Vue.use(Field)
Vue.use(NavBar)
Vue.use(Form)
Vue.use(Calendar)
Vue.use(Radio)
Vue.use(RadioGroup)
Vue.use(Button)
Vue.use(Toast)
Vue.use(DatetimePicker)
Vue.use(Cascader)
Vue.use(Popup)
Vue.use(Uploader)
Vue.use(VanImage)
export default {
  data () {
    return {
      nickName: '',
      email: '',
      tel: '',
      radio: '',
      birthday: '',
      value: '',
      showPicker: false,
      show: false,
      minDate: new Date(1800, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      userMsg: []
    }
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    showPopup () {
      this.show = true
    },
    onConfirm (date) {
      this.birthday = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
      this.showPicker = false
    },
    readOk (v) {
      console.log(v)
    }
  },
  mounted () {
    getUser({
      userId: sessionStorage.getItem('userId')
    }).then(data => {
      console.log(data)
      this.userMsg = data.data.msg[0]
      this.tel = data.data.msg[0].tel
    })
  },
  computed: {
    avatar () {
      return this.userMsg.avatar ? this.userMsg.avatar : 'https://img02.hua.com/pc/assets/img/avatar_default_06.jpg'
    }
  }
}
</script>
<style lang="scss">
.box{
  overflow: hidden;
}
.van-hairline--bottom::after{
   border-bottom: 1px solid #ccc;
}
.my-img{
  text-align: center;
.van-uploader{
    margin: 0.4rem 0;
  }
  p{
    color: #7f7f7f;
  }
}
.img1 {
  width: 64px;
  height: 64px;
  margin: auto;
  border-radius: 50%;
}
.van-cell::after{
  border-bottom: 1px solid #ccc;
}
.van-cell{
  border-bottom: 1px solid #ccc;
}
.van-nav-bar__text{
  color: #000;
}
.van-icon-arrow-left::before{
  color: #000;
}
.van-picker__confirm {
    color: #FF734C;
}
.van-picker-column__item{
   color: #FF734C;
}
.van-image__error, .van-image__img, .van-image__loading{
  border-radius: 50%;
}
</style>
